<template>
  <div class="permission-manag-resources-page" style="display: flex; height: 100%">
    <div style="flex: 1">
      <pageManage>
        <template #head>
          <div>
            <span class="search-item">所属应用:</span>
            <cascader
              ref="mycascader"
              class="search-item"
              style="width: 120px"
              :app-type-list="searchFun.appTypeListTra"
              @change="searchFun.appTypeValeChange"
            ></cascader>
          </div>
          <div>
            <span class="search-item">来源:</span>
            <a-input v-model:value="searchFun.searchInfo.source" class="search-item" style="width: 120px"></a-input>
          </div>
          <div>
            <span class="search-item">标识:</span>
            <a-input v-model:value="searchFun.searchInfo.key" class="search-item" style="width: 120px"></a-input>
          </div>
          <div>
            <span class="search-item">类型:</span>
            <a-input v-model:value="searchFun.searchInfo.type" class="search-item" style="width: 120px"></a-input>
          </div>
          <div>
            <span class="search-item">路径标识:</span>
            <a-input v-model:value="searchFun.searchInfo.route" class="search-item" style="width: 120px"></a-input>
          </div>
          <a-button type="primary" @click="searchFun.searchClick">
            <SearchOutlined />
            查询
          </a-button>
          <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
        </template>
        <template #middle>
          <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px">
            <a-button type="primary" @click="cli_newAdd">
              <PlusOutlined />
              新增
            </a-button>
          </div>
          <div>
            <a-table
              :columns="table.columns"
              :data-source="portComList"
              :pagination="false"
              :scroll="{ y: table.tableHeight }"
              :loading="table.loading"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'option'">
                  <div style="position: relative; left: -24px; display: flex; font-size: 14px">
                    <a-button type="link" @click="modalFunc.cliPerm(record)">查看权限</a-button>
                    <a-button type="link" @click="modalFunc.cliRole(record)">查看角色</a-button>
                  </div>
                </template>
                <template v-if="column.key === 'override'">
                  {{ record.override ? '是' : '否' }}
                </template>
              </template>
            </a-table>
          </div>
        </template>
        <template #foot>
          <a-pagination
            v-model:current="pagFun.pagInfo.pageNo"
            show-quick-jumper
            :total="pagFun.pagInfo.total"
            :responsive="false"
            @change="pagFun.onChange"
          />
        </template>
      </pageManage>
    </div>
    <resouPermVue
      v-if="modalFunc.isShowPerm"
      ref="myresouPerm"
      :current-item="modalFunc.currentItem"
      @after-close="modalFunc.permClose"
    />
    <resouRoleVue
      v-if="modalFunc.isShowRole"
      ref="myresouRole"
      :current-item="modalFunc.currentItem"
      @after-close="modalFunc.roleClose"
    />
  </div>
</template>

<script setup>
import { watch, ref, reactive, onMounted, nextTick, computed, toRefs, defineEmits } from 'vue'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import pageManage from './components/pageManage'
import resouPermVue from './components/resourceComp/resouPerm.vue'
import resouRoleVue from './components/resourceComp/resouRole.vue'
import cascader from './components/resourceComp/cascader'

const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    table.getTableData()
  },
})

//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 180,
    },
    {
      title: '所属应用',
      dataIndex: 'app',
      key: 'app',
    },
    {
      title: '来源',
      dataIndex: 'source',
      key: 'source',
    },
    {
      title: '标识',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '路径标识',
      dataIndex: 'route',
      key: 'route',
    },
  ],
  tableHeight: 332,
  getTableData: (pag = { ...pagFun.pagInfo }) => {
    table.loading = true
    factory.getResources(pag).then((res) => {
      table.loading = false
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
  parItm: { key: '-1', name: '托管角色' },
  loading: false,
})
table.getTableData()
onMounted(() => {
  let ele = document.getElementsByClassName('permission-manag-resources-page')
  table.tableHeight = ele[0].offsetHeight - 217
})

//==查看权限,查看角色弹框============================
const myresouPerm = ref(null)
const myresouRole = ref(null)
const modalFunc = reactive({
  currentItem: {},
  //查看权限
  isShowPerm: false,
  cliPerm: (record) => {
    modalFunc.currentItem = record
    modalFunc.isShowPerm = true
    nextTick(() => {
      myresouPerm.value.visible = true
    })
  },
  permClose: () => {
    modalFunc.isShowPerm = false
  },
  //查看角色
  isShowRole: false,
  cliRole: (record) => {
    modalFunc.currentItem = record
    modalFunc.isShowRole = true
    nextTick(() => {
      myresouRole.value.visible = true
    })
  },
  roleClose: () => {
    modalFunc.isShowRole = false
  },
})

/***查询功能************************/
const mycascader = ref(null) //重置多级选择
const searchFun = reactive({
  searchInfo: { app: '', key: '', type: '', source: '', route: '' },
  searchClick: () => {
    pagFun.pageNo = 1
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo }
    table.getTableData(post)
  },
  reset: () => {
    searchFun.searchInfo = { app: '', key: '', type: '', source: '', route: '' }
    mycascader.value.changeValue()
  },
  //所属应用
  appTypeList: [],
  appTypeListTra: computed(() => {
    let arr = searchFun.appTypeList
    arr.forEach((item) => {
      item.label = item.domain
      item.value = item.domain
      item.children = item.list
      item.children.forEach((m) => {
        m.label = m.name
        m.value = m.appKey
      })
    })
    return arr
  }),
  appTypeValeChange: (val) => {
    searchFun.searchInfo.app = val.value
  },
  getAppTypeList: () => {
    factory.getAppTypeList().then((res) => {
      searchFun.appTypeList = res.data
    })
  },
})
searchFun.getAppTypeList()
</script>

<style lang="less" scoped>
.search-item {
  margin-right: 15px;
}
</style>
